<template>
  <div class="classAlbum br bx">
    <div class="common_title bx">
      <div class="common_title_left">相册列表</div>
      <div class="common_title_right">
        <div class="common_title_btn" @click="openLayer()">新增</div>
        <div class="common_title_btn" @click="openEditor()">编辑</div>
        <!-- <div class="common_title_btn" @click="deletBtn()" v-if="!allDeleteFlag">删除</div>
        <div class="common_title_btn" @click="deletSureBtn()" v-if="allDeleteFlag">确认</div> -->

      </div>
    </div>
    <div class="classAlbumBox bx">
      <div class="classAlbum_li bx">

        <div class="classAlbum_li_images">
          <div class="classAlbum_li_imageBox" :class="!editorFlag?'active':''" v-for="(item, index) in images" @click="chooseImageBox(index,item.id)">
            <div class="classAlbum_li_image_li">
              <!-- <img :preview="index" :src="imagesItem.url" :preview-text="imagesItem.text" v-for="(imagesItem,imagesIndex) in item.imagesArr"> -->
              <!-- <img :src="item.url"> -->
              <img :src="item.cover" :title="item.remark">
            </div>
            <div class="classAlbum_li_image_title">{{item.media_group_name}} ({{item.media_num}})</div>
            <div class="classAlbum_li_image_deleteBtn" @click.stop="imageDelete(item.media_group_name,item.id)"></div>
            <div class="classAlbum_li_image_editorBtn" @click.stop="imageEditor(index,item.id)" v-show="editorFlag">
              <i class="iconfont icon-msnui-edit"></i>
            </div>
            <div class="classAlbum_li_image_allDeleteBtn" @click.stop="allDelete(1,index,item.id,item.media_group_name)" v-if="allDeleteFlag"
              :class="deleteList[index]!=null?'active':''"></div>
          </div>
        </div>
      </div>
      <div class="classAlbumShowBox bx br" v-show="classAlbumShowFlag">
        <div class="common_title bx">
          <div class="common_title_left" :class="classAlbumShowFlag?'active':''"></div>
          <div class="common_title_right">
            <div class="common_title_btn" @click="deletBtn1()" v-if="!allDeleteFlag1">批量删除</div>
            <div class="common_title_btn" @click="deletSureBtn1()" v-if="allDeleteFlag1">确认删除</div>
            <div class="common_title_btn" @click="classAlbumShowFlagChange">返回</div>
          </div>
        </div>
        <div class="classAlbumShow_liBox bx">
          <div class="classAlbumShow_liBox_titleBox">
            <div class="classAlbumShow_liBox_title">{{chooseData.media_group_name}}</div>
            <div class="classAlbumShow_liBox_title_time">发布时间：{{chooseData.create_time}}</div>
            <div class="classAlbumShow_liBox_title_person">{{chooseData.remark}}</div>
          </div>
          <div class="classAlbumShow_liBox_image">

            <div class="classAlbum_li_images">
              <div class="classAlbum_li_imageBox" v-for="(item, index) in imagesDetail">
                <div class="classAlbum_li_image_li">
                  <img :src="item.media_url" :preview="imageIndex" :preview-text="item.remark" :alt="item.media_name" :title="item.media_name">
                </div>
                <div class="classAlbum_li_image_title">{{item.media_name}}</div>
                <div class="classAlbum_li_image_deleteBtn" @click.stop="imageDetailDelete(item)"></div>
                <div class="classAlbum_li_image_allDeleteBtn" @click.stop="allDelete(2,index,item.id,item.media_name)" v-if="allDeleteFlag1"
                  :class="deleteList[index]!=null?'active':''">
                </div>
              </div>
              <div class="classAlbum_li_imageBox addImageBox" >
                <div class="classAlbum_li_image_li ">
                  <img src="static/images/addImage.png">
                </div>
                <input name="file" type="file" @change="chooseFile" multiple="multiple" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="common_alertBox addImage" v-if="addImageFlag">
      <div class="common_alertBox_header" v-if="!editorFlag">
        <span>新增相册</span>
      </div>
      <div class="common_alertBox_header" v-if="editorFlag">
        <span>编辑相册</span>
      </div>
      <div class="common_alertBox_content">

        <div class="common_alertBox_li">
          <span class="importentIcon">相册名称：</span>
          <div class="chooseBox paddingInput">
            <input type="text" v-model="imageData.media_group_name">
          </div>
        </div>
        <div class="common_alertBox_li">
          <span>相册描述：</span>
          <div class="chooseBox paddingTextarea">
            <textarea name="" id="" cols="30" rows="10" v-model="imageData.remark"></textarea>
          </div>
        </div>
      </div>
      <div class="common_alertBox_footer">
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="addImageSureBtn" v-if="!editorFlag">保存</div> -->
        <!-- <div class="common_alertBox_footer_btn sureBtn" @click="editorSureBtn" v-if="editorFlag">修改</div> -->
        <!-- <div class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</div> -->

        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="addImageSureFlag" @click="addImageSureBtn"
          v-if='!editorFlag'>保存</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn sureBtn" :loading="editorSureFlag" @click="editorSureBtn" v-if='editorFlag'>修改</el-button>
        <el-button type="primary" class="common_alertBox_footer_btn cancelBtn" @click="cancelBtn">取消</el-button>
      </div>
    </div>
  </div>


</template>

<script>
  import {
    http
  } from "../../../api/config"; //引入请求

  export default {
    name: 'home',
    data() {
      return {
        addImageSureFlag: false,
        editorSureFlag: false,
        addImageFlag: false,
        classAlbumShowFlag: false,
        editorFlag: false,
        allDeleteFlag: false,
        allDeleteFlag1: false,
        imageIndex: 0,
        chooseData:{},
        chooseIndex:'',
        class_id: 1,
        imageData: {
          class_id: 1,
          media_group_name: '',
          remark: ''
        },
        deleteList: [],
        images:[{"id":18,"media_group_name":"测试12","media_num":0,"remark":"111","cover":"static/images/noImage.png","create_time":"2018-08-20 16:21:46"}],
        imagesDetail: [{"id":87,"media_name":"4.jpg","media_type":"jpg","media_url":"http://192.168.3.254:8280/upload/class1/group18/7d0d0df6df6066ece152760c98824590.jpg","filesize":95725,"duration":0,"remark":"","create_time":"2018-08-27 15:26:09"}]

      }
    },
    methods: {
      imageDelete(name, id) { //删除相册
        //console.log(id)

        var _this = this;
        this.$confirm('此操作将永久删除' + name + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          modal: true,
          type: 'warning'
        }).then(() => {



        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      imageDetailDelete(e) {
        //console.log(e)

        var _this = this;
        this.$confirm('此操作将永久删除' + e.media_name + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      openEditor() {
        this.editorFlag = !this.editorFlag;

      },
      imageEditor(index, id) {
        $('.mask').show();
        this.imageData = this.images[index]
        this.addImageFlag = true;
      },
      deletBtn() {
        this.allDeleteFlag = true;

      },
      deletBtn1() {
        this.allDeleteFlag1 = true;

      },
      addImageBtn() {

      },
      chooseFile(e) {

      },
      deletSureBtn1() {
        let _this = this;
        //console.log(this.deleteList)
        var nameStr = '';
        var idStr = '';
        for (var i = this.deleteList.length; i >-1; i--) {
          if (this.deleteList[i]) {
            nameStr += this.deleteList[i].name + '、';
            idStr += this.deleteList[i].id + ','
          }else{
            this.deleteList.splice(i,1); 
          }
        }
        if(this.deleteList.length==0){
          var page = 1;
            var pagesize = _this.pagesize;
            _this.getData(page, pagesize);
            _this.allDeleteFlag = false;
            _this.allDeleteFlag1 = false;
            _this.chooseImageBox(_this.chooseIndex, _this.imageId);
          return
        }
        //console.log(this.deleteList)

        nameStr = nameStr.substring(0, nameStr.length - 1);
        idStr = idStr.substring(0, idStr.length - 1);
        _this.$confirm('此操作将永久删除' + nameStr + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          modal: true,
          type: 'warning'
        }).then(() => {

          //console.log('正常')



        }).catch((e) => {

          _this.$message({
            type: 'info',
            message: '已取消删除'
          });
          _this.allDeleteFlag = false;
          _this.allDeleteFlag1 = false;
          _this.deleteList = [];
        });

      },
      deletSureBtn() {

        //console.log(this.deleteList)
        var nameStr = '';
        var idStr = '';
        for (var i = 0; i < this.deleteList.length; i++) {
          if (this.deleteList[i]) {
            nameStr += this.deleteList[i].name + '、';
            idStr += this.deleteList[i].id + ','
          }
        }
        let _this = this;
        nameStr = nameStr.substring(0, nameStr.length - 1);
        idStr = idStr.substring(0, idStr.length - 1);
        _this.$confirm('此操作将永久删除' + nameStr + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          //console.log('正常')



        }).catch((e) => {

          _this.$message({
            type: 'info',
            message: '已取消删除'
          });
          _this.allDeleteFlag = false;
          _this.allDeleteFlag1 = false;
          _this.deleteList = [];
        });

      },
      allDelete(type, index, id, name) {
        let arr = this.deleteList;
        this.deleteList = [];
        if (arr[index]) {
          arr[index] = null;
        } else {

          arr[index] = {
            id: id,
            name: name
          }
        }
        // if (type == 1) {
        //   if (arr[index]) {
        //     arr[index] = null;
        //   } else {

        //     arr[index] = {
        //       id: id,
        //       name: name
        //     }
        //   }
        // } else if (type == 2) {
        //   if (arr[index]) {
        //     arr[index] = null;
        //   } else {

        //     arr[index] = {
        //       id: id,
        //       name: name
        //     }
        //   }
        // }
        this.deleteList = arr;
        //console.log(this.deleteList)

      },

      addImageSureBtn() {
        if (this.trim(this.imageData.media_group_name) === '') {
          this.$message.error('相册名不能为空');
          return;
        }
        var _this = this;
        _this.addImageSureFlag = true;
        let class_id = this.class_id;



      },
      editorSureBtn() {
        //console.log(this.imageData);
        let _this = this;
        let class_id = this.class_id;
        _this.editorSureFlag = true;
        //console.log(_this.imageData.id, {
        //   class_id: class_id,
        //   media_group_name: _this.imageData.media_group_name,
        //   remark: _this.imageData.remark,
        // })

   

      },
      openLayer() {
        this.addImageFlag = true;
        $('.mask').show();
      },
      cancelBtn() {
        this.addImageFlag = false;
        this.editorFlag = false;
        this.allDeleteFlag = false;
        this.allDeleteFlag1 = false;
        this.addImageSureFlag = false;
        this.editorSureFlag = false;
        this.imageData = {
          class_id: this.class_id,
          media_group_name: '',
          remark: ''
        }
        $('.mask').hide();
      },
      classAlbumShowFlagChange() {
        // this.classAlbumShowFlag = false;
        location.reload();
      },
      getData() { //获取数据
        var page = 0;
        var pagesize = 10;
        let class_id = this.class_id;
        let _this = this;


      },

      chooseImageBox(index, id) { //选择相册
        let _this = this;
        _this.chooseIndex=index;
        _this.imageId = id;
        _this.chooseData={
          media_group_name:_this.images[index].media_group_name,
          create_time:_this.images[index].create_time,
          remark:_this.images[index].remark,
        }
        this.classAlbumShowFlag=true;

      },

    },

    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      });


    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .addImage {
    width: 800px;
    height: 387px;
  }

  .chooseBox {
    border-radius: 10px;
  }

  .chooseBox.paddingTextarea {
    width: 568px;
    height: 93px;
    padding: 2px;

  }

  .chooseBox.paddingTextarea textarea {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    border-radius: 18px;
    resize: none;
    padding: 10px;
    box-sizing: border-box;

  }

  .addImage .common_alertBox_content {
    padding: 0 54px 0 72px;
  }

  .importentIcon::before {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    background: url('../../../../static/images/importent.png');
  }

  .common_alertBox_li {
    justify-content: flex-start;
    align-items: center;
  }

  .classAlbumShow_liBox_titleBox {
    text-align: left;
  }

  .classAlbumShow_liBox_title {
    font-size: 24px;
    color: #3a3a3a;
  }

  .classAlbumShow_liBox_title_person {
    font-size: 16px;
    color: #878787;
  }

  .classAlbumShow_liBox_title_time {
    font-size: 18px;
    color: #878787;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .classAlbum {
    background: #fff;
    width: 100%;

    padding: 90px 85px 0 85px;
    position: relative;
    height: 100%;

  }

  .common_title_left.active {
    color: #fff;
  }

  .classAlbumBox {
    width: 100%;
    height: 100%;

    overflow-y: scroll;

  }

  .classAlbum_li {
    width: 100%;
    height: 360px;
    position: relative;
    text-align: left;
  }

  .classAlbumShow_liBox {
    padding: 60px 62px 0 62px;
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .classAlbum_li_images {
    width: 100%;
    /* background: red; */
    display: flex;
    margin-top: 18px;
    flex-wrap: wrap;
  }

  .classAlbum_li_imageBox {
    width: 227px;
    height: 184px;
    margin-right: 20px;
    margin-bottom: 45px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 1);
    background: #1985ce;
    position: relative;
    cursor: pointer;
  }

  .classAlbum_li_imageBox .classAlbum_li_image_deleteBtn {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 10px;
    bottom: 38px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    transition: opacity 0.5s;
    background: url('../../../../static/images/delete_img.png');
    /* display: none; */
    opacity: 0;
    z-index: 2;
  }

  .classAlbum_li_imageBox.active:hover .classAlbum_li_image_deleteBtn {

    /* display: block; */
    opacity: 1;
    z-index: 100;
  }

  .classAlbum_li_image_title {
    width: 100%;
    height: 30px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    position: absolute;
    line-height: 30px;
    left: 0;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .classAlbum_li_image_li {
    width: 100%;
    height: 100%;
  }

  .classAlbum_li_imageBox.addImageBox {
    box-shadow: inherit;

  }

  .classAlbum_li_imageBox.addImageBox input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }

  .classAlbum_li_imageBox.addImageBox .classAlbum_li_image_li img {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform: none;
  }

  .classAlbum_li_image_li img {
    width: 220px;
    height: 145px;
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
    border-radius: 5px 5px 0 0;
    display: none;

  }

  .classAlbum_li_image_li img:first-of-type {
    display: block;
  }

  .classAlbumShowBox {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    z-index: 100;

  }

  .classAlbum_li_image_editorBtn {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    /* display: none; */
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .classAlbum_li_image_editorBtn i{
    color: #fff;
    font-size: 100px;
  }
  .classAlbum_li_image_allDeleteBtn {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    /* display: none; */
    z-index: 101;
  }
  .classAlbum_li_image_allDeleteBtn::after{
    background: url('../../../../static/images/imageChoose.png') no-repeat;
    background-size: 28px;
    content: '';
    width: 28px;
    height: 28px;
    position: absolute;
    left: 0;
    top: 0;
    transform:translate(-50%,-50%);
  }
  
  .classAlbum_li_image_allDeleteBtn.active::after {
    background: url('../../../../static/images/imageSure.png') no-repeat;
    background-size: 28px;
    content: '';
    width: 28px;
    height: 28px;
    position: absolute;
    left: 0;
    top: 0;
    transform:translate(-50%,-50%);
  }
  .common_title {
    background: #fff;
    z-index: 2;
  }
</style>
